<html>
<div id="siteLogin">

	<div>
		<h5>
			<g:message code="auth.login.with.site.account" />
		</h5>
	</div>

	<div class="form-horizontal">
		<div id="loginUpdate"></div>

		<form action='${request.contextPath}/j_spring_security_check'
			method='POST' id='ajaxLoginForm' name='ajaxLoginForm'>

			<div id="userIdDiv" class="control-group">
				<label class="control-label" for="username"><g:message
						code="auth.login.credentials.id" /></label>
				<div class="controls">
					<g:field id="username" class="input-large" type="text"
						name="j_username" value="" maxlength="30"
						placeholder="${message(code: 'auth.login.credentials.usernameOrEmail')}" />
				</div>
			</div>

			<div id="passwordDiv"
				class="control-group">
				<label class="control-label" for="password"><g:message
						code="auth.login.credentials.password" /></label>
				<div class="controls">
					<g:field id="password" class="input-large" type="password"
						name="j_password" value="" maxlength="30"
						placeholder="${message(code: 'auth.login.credentials.password')}" />
				</div>
			</div>

			<div class="control-group">
				<div class="controls">
					<label for="remember_me" class="checkbox"> <input
						id="remember_me" type="checkbox"
						name='_spring_security_remember_me'
						<g:if test='${hasCookie}'>checked='checked'</g:if> /> <g:message
							code="auth.login.remember" />
					</label>
					<div class="cleaner"></div>
					<button id="loginButton" class="btn btn-success" style="margin-top: 13px;">
						<g:message code="auth.login" />
					</button>
					<g:isOnline>
						<img id="loadingImageLogin" class="loadingImageLogin"
							src="${resource(dir:'images', file: 'ajax-loader.gif') }"
							alt="image"></img>
					</g:isOnline>
				</div>
			</div>
		</form>
	</div>

	<script type="text/javascript">
		jQuery("#loginButton").click(function() {
			showLoadingImageLogin();
			jQuery.ajax({
                         type: 'POST',
                         data: $('#ajaxLoginForm').serialize(),        
                         url: '${request.contextPath}/j_spring_security_check',
                         success: function(data,textStatus){ 
                         		  hideLoadingImageLogin();
                         		  	
                                  if(data.success){
                                     javascript: scroll(0, 0); 
                                     window.location.href = '${createLink(uri: '/')}';
                                  } 
                                  else if (data.error) {
                                  	 jQuery('#password').attr('value', '');
                                     jQuery('#loginUpdate').html('<div class="alert alert-error"> <a class="close" data-dismiss="alert">×</a>' + data.error + '</div>');
                                     $("#userIdDiv").addClass("error");
                                     $("#passwordDiv").addClass("error");
                                  }
                                  else {
                                  	 window.location.href = '${redirectUrl}'
                                  }
                         }
   			});
	                
	        return false
		});
		
		$(document).ready(function() {
			$("#loadingImageLogin").hide();
		});

		function showLoadingImageLogin() {
			$("#loadingImageLogin").fadeIn();
		}
		
		function hideLoadingImageLogin() {
			$("#loadingImageLogin").hide();
		}
	</script>
</div>
</html>